<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq的dom操作</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <p>我要就业</p>
    <hr>
    <button onclick="appendText()">追加文本</button>
    <hr>
    <button onclick="appendElement()">添加元素</button>
    <hr>
    
    <hr>
    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

        这是 div 中的一些文本。
        <p>这是在 div 中的一个段落。</p>
        <p>这是在 div 中的另外一个段落。</p>
        <p class="p">1213123</p>
        <p class="p">88888</p>
        <p class="p">9999</p>

        
        </div>
        <br>
        <button>清空div元素</button>
    <script>
        $(function(){
            // append()在结尾插入内容
            $('p').append('你放屁')
            // prepend()在开头插入内容
            $('p').prepend('你说你想就业吗？')

        })
        // append(text1,text2,text3) : 链式插入
        function appendText(){
            var text1 = "<h1>太想就业了</h1>"
            var text2 = $("<h2></h2>").text("太想工作了") // 使用jq来创建文本
            var text3 = document.createElement('p')
            text3.innerHTML = "创建了p标签"
            $('body').append(text1,text2,text3)
        }

        // 通过 after() 和 before() 方法添加若干元素,after是在创建的标签后添加,before是在创建的标签前添加
        function appendElement(){
            var text1 = "<h1>从头再来</h1>"
            var text2 = $("<h2></h2>").text("只不过是从头再来") // 使用jq来创建文本
            var text3 = document.createElement('p')
            text3.innerHTML = "创建了div标签"
            $('body').before(text1,text2,text3)
        }

        // 总结:append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加。

        // remove():删除被选元素及子元素
        // empty():表示清空所有的子元素
        $("button").click(function(){
            // $("#div1").empty();
            // 移除所有class为p的p标签
            $('p').remove('.p')
        });
       





    </script>
    
</body>

</html>